<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1 {
      padding: 20px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="box1">
    <button id="btn1">按钮</button>
  </div>

  <script>
    // e.target 是触发事件的哪个元素（鼠标点的是谁，e.target 就指向谁）
    // e.currentTarget 是当前正在触发事件的那个元素（当前的事件绑定给谁，e.currentTarget 就指向谁）

    document.querySelector('#box1').onclick = (e) => {
      console.log('点击了 Box1')
      // console.log(e.target)
      // 结论：今后在实际项目开发中，如果希望事件绑定给哪个元素，就想拿到这个元素，此时用 e.currentTarget 最合适！！！
      console.log(e.currentTarget)
    }

    document.querySelector('#btn1').onclick = (e) => {
      console.log('点击了 Btn1')
      // console.log(e.target)
      // console.log(e.currentTarget)
    }
  </script>
</body>
</html>